<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>门禁控制</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/config.js"></script>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        .vertical-center{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <script type="text/javascript">

        var pass=false;
        $(function () {
            if (($.cookie("Id")==null)||($.cookie("UserName")==null)){
                window.location="http://"+config.local_ip+"/WebApp/Login.html";
                return;
            }

            $("#welcome").text("你好，"+$.cookie("UserName"));
            var url="http://"+config.web_ip+"/Services/AndroidService.svc/Android/GetExperimentUserDataByWhere/"+$.cookie("Id");
            $.get(url,function (data,state) {
                if (state){
                    if (data.Success){
                        var $select=$("#classSelect");
                        $.each(data.Data,function (index,content) {
                            var $option=$("<option value='"+content.ClassId+"'>"+content.ClassName+"</option>");
                            $select.append($option);
                        });
                        pass=true;
                    }else{
                        alert("您还没有预约教室，暂无可用教室");
                        pass=false;
                    }
                }else {
                    alert("请求服务器失败，请重试");
                    pass=false;
                }
            });
        });
        function openDoor(obj) {
            if (!pass){
                alert("您还没有预约教室，暂无可用教室");
                return;
            }
            $(obj).attr("src","image/bg_opening.png");
            var classId=$("#classSelect").val();
            var url="http://"+config.web_ip+"/Services/AndroidService.svc/Android/ValEntrancePerm?userId="+$.cookie("Id")+"&classId="+classId;
            $.post(url,function (data,state) {
                if(state){
                    if(data.Success){
                        $(obj).attr("src","image/bg_success.png");
                    }else{
                        $(obj).attr("src","image/bg_fail.png");
                        alert("发送指令失败，"+data.Msg);
                    }
                }else{
                    $(obj).attr("src","image/bg_fail.png");
                    alert("请求服务器失败，请重试");
                }
                setTimeout(function () {
                    $(obj).attr("src","image/bg_open.png");
                },3000)
            });
        }

        function safeExit() {
            $.cookie("username","" , { expires: -1 });
            $.cookie("password","" , { expires: -1 });
            $.cookie("Id","" , { expires: -1 });
            $.cookie("UserName","" , { expires: -1 });
            window.location="http://"+config.local_ip+"/WebApp/Login.html";
        }

    </script>
</head>
<body background="image/bg.png">
    <img src="image/safeExit.png" class="img-responsive" style="float: right;margin: 20px" onclick="safeExit()">
    <div class=" vertical-center">
        <p class="text-center" style="margin-bottom: 50px"><font color="white" id="welcome"></font></p>
        <img src="image/bg_icon.png" class="img-responsive center-block">
        <select class="form-control btn-info" style="margin-top: 100px" id="classSelect"></select>
        <img onclick="openDoor(this)" src="image/bg_open.png" class="img-responsive center-block" style="margin-top: 20px">
    </div>
</body>
</html>